<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getFeatureList } from '@/api/user'
	
	const loading = ref(false)
	const list = ref([])
	
	function getData() {
		loading.value = true
		getFeatureList({status: 1}).then(res => {
			let result = res.result || []
			list.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function openPage(item) {
		let url = `/pages/shop/specialDetail?id=${item.featureId}&title=${item.name}`
		uni.navigateTo({url})
	}
	
	onLoad(() => {
		getData()
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content" v-if="list.length">
			<view class="item-box" v-for="item in list" :key="item.featureId" @click="openPage(item)">
				<uv-image :src="item.images && item.images[0] && item.images[0].furl" width="100%" height="400"></uv-image>
				<view class="item-bottom">
					<view class="item-title uv-line-1">{{item.name || '--'}}</view>
					<view class="item-info">
						<view class="info-left uv-line-1">{{item.remark || '--'}}</view>
						<view class="info-right">
							<text>查看更多</text>
							<uv-icon name="arrow-right" color="#767473" size="30" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty text="没有找到办宴特色" v-else></empty>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding: 32rpx;
		.app-content{
			display: flex;
			flex-direction: column;
			gap: 48rpx;
			.item-box{
				overflow: hidden;
				border-radius: 32rpx;
				background-color: #FFFFFF;
				box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
				.item-bottom{
					padding: 24rpx;
					.item-title{
						margin-bottom: 12rpx;
						font-weight: 600;
						font-size: 40rpx;
						line-height: 48rpx;
					}
				}
				.item-info{
					display: flex;
					align-items: center;
					gap: 20rpx;
					color: #767473;
					.info-left{
						width: calc(100% - 164rpx);
						display: flex;
						align-items: center;
						gap: 8rpx;
					}
					.info-right{
						width: 144rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						gap: 4rpx;
					}
				}
			}
		}
	}
</style>